<template>
	<view class="home">
		<!-- #ifdef H5 -->
		<back></back>
		<!-- #endif -->
		<view class="top u-flex u-row-between">
			<view class="title">新增产品</view>
			<view class="u-flex">
				<view class="radius u-flex-center" :class="shelf_state==1 ? 'rad_css' : ''" @click="shelf_state==1?shelf_state=0:shelf_state=1">
					<u-icon name="checkmark" size="20" color="#fff" v-if="shelf_state==1"></u-icon>
				</view>
				<view class="grey">审核后直接上架</view>
			</view>
		</view>
		<view class="item it_flex">
			<view class="it_left">商品名称</view>
			<input type="text" placeholder="请输入商品名称" v-model="title" />
		</view>
		<view class="item it_flex" @click="is_cate_show=true">
			<view class="it_left">产品分类</view>
			<!-- <bararea :value="districtValue" @confirm="cateSubmit"></bararea> -->
			<view class="it_right">
				<text>{{catename?catename:'请选择产品分类'}}</text>
				<image class="it_lef_img" src="@/static/wImg/arrowRig.png"></image>
			</view>
		</view>
		<picker :range="postagelist" range-key="name" @change="getPostage">
			<view class="item it_flex">
				<view class="it_left">运费模版</view>
				<view class="it_right">
					<text>{{postagename?postagename:'请选择是否包邮'}}</text>
					<image class="it_lef_img" src="@/static/wImg/arrowRig.png"></image>
				</view>
			</view>
		</picker>
		<view class="item it_flex" @click="is_area_show=true">
			<view class="it_left">选择地区</view>
			<view class="it_right">
				<text>{{areaname?areaname:'请选择地区'}}</text>
				<image class="it_lef_img" src="@/static/wImg/arrowRig.png"></image>
			</view>
		</view>
		<view class="item item_pad_bot">
			<view class="it_left" style="margin-bottom: 30rpx;">上传商品图片</view>
			<view class="u-flex u-flex-wrap it_right">
				<image class="it_rig_img" src="@/static/wImg/grePlus.png" v-if="!cover_img" @click="upshopImg"></image>
				<view class="it_rig_img" style="position: relative;" v-if="cover_img">
					<image class="it_rig_img" mode="aspectFill" :src="cover_img"></image>
					<image src="../../static/yCreate/cha.png" mode="" class="scimg" @click="cover_img=''"></image>
				</view>
			</view>
		</view>
		<view class="item item_pad_bot">
			<view class="it_left" style="margin-bottom: 30rpx;">上传商品视频</view>
			<view class="u-flex u-flex-wrap it_right">
				<image class="it_rig_img" src="@/static/wImg/video.png" @click="chooseVideo" v-if="!video"></image>
				<view class="it_rig_img" style="position: relative;"  v-if="video">
					<video :src="video" class="it_rig_img" controls="false"></video>
					<image src="../../static/yCreate/cha.png" mode="" class="scimg" @click="video=''"></image>
				</view>
				<image class="it_rig_img" src="@/static/wImg/grePlus.png" @click="uplistImg"></image>
				<view class="it_rig_img" style="position: relative;"  v-for="item,index in imagelist" :key="index">
					<image class="it_rig_img"  mode="aspectFill" :src="item"></image>
					<image src="../../static/yCreate/cha.png" mode="" class="scimg" @click="getSc(index)"></image>
				</view>
			</view>
		</view>
		<view class="item item_pad_bot" v-for="(item,index) in skuList" :key="index">
			<view class="it_tit">
				<view class="it_left">{{item.title}}</view>
				<view class="u-flex it_grey" @click="skuDel(index)">
					<image src="@/static/wImg/delete.png"></image>
					删除
				</view>
			</view>
			<view class="u-flex u-flex-wrap">
				<view class="it_specs" v-for="(items,indexs) in item.skuitem" :key="indexs">
					<input type="text" v-model="items.name" confirm-type="done" @blur="iptitSpec(indexs)" @confirm="iptitSpec(indexs)" />
					<image class="it_sp_line" src="@/static/wImg/line.png"></image>
					<image class="it_sp_cha" src="@/static/wImg/cha.png" @click="delSpec(indexs,item.skuitem)"></image>
				</view>
				<view class="it_specs">
					<image class="it_sp_plus" src="@/static/wImg/smaPlus.png"></image>
					<view class="it_sp_gre" @click="addSpec(item.skuitem,index)">添加新规格</view>
				</view>
			</view>
		</view>
		<view class="item item_pad_bot" v-if="is_add_show">
			<view class="it_tit">
				<input type="text" placeholder="请输入规格类型" confirm-type="done" @blur="iptNewspec" @confirm="iptNewspec" v-model="newSpec" />
				<view class="u-flex it_grey" @click="delAdd()">
					<image src="@/static/wImg/delete.png"></image>
					删除
				</view>
			</view>
			<view class="u-flex u-flex-wrap">
				<view class="it_specs">
					<image class="it_sp_plus" src="@/static/wImg/smaPlus.png"></image>
					<view class="it_sp_gre">添加新规格</view>
				</view>
			</view>
		</view>
		<view class="item item_pad_bot">
			<view class="it_left">价格</view>
			<view class="it_right_duo" v-for="item,index in PricList" :key="index">
				<view class="u-flex u-flex-wrap" style="margin-top: 20rpx;">
					<view class="it_pri" v-for="items,indexs in item.temp" :key="indexs">{{items}}</view>
				</view>
				<view class="u-flex u-row-between it_rig_line">
					<view class="it_ban u-flex">
						<view class="it_left">商品价格</view>
						<input type="number" placeholder="请输入价格" v-model="item.price" />
					</view>
					<view class="it_ban u-flex">
						<view class="it_left">设置库存</view>
						<input type="number" placeholder="请输入库存" v-model="item.kuc" />
					</view>
				</view>
				<view class="u-flex u-row-between it_rig_line">
					<view class="it_ban u-flex">
						<view class="it_left">商品重量</view>
						<input type="number" placeholder="请输入重量" v-model="item.weigh" />
					</view>
					<view class="it_ban u-flex">
						<view class="it_left">划线价格</view>
						<input type="number" placeholder="请输入划线价格" v-model="item.market_price" />
					</view>
				</view>
			</view>
		</view>
		<view class="add u-flex-center" @click="is_add_show=true">新增规格</view>
		<view class="add btn u-flex-center" @click="getSubmit()">确认新增</view>
		<view style="height: 30rpx;"></view>
		<!-- 多列选择 -->
		<view class="layer" v-if="is_cate_show" style="z-index: 9999999999;">
			<view class="layer-content">
				<view
					class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between">
					<view class="text-cc" @click="is_cate_show=false">取消</view>
					<view class="" style="color:#007aff;" @click="cateSubmit()">确定</view>
				</view>
				<picker-view :value="multiIndex" :indicator-style="indicatorStyle" class="picker-view" @change="change">
					<picker-view-column>
						<view class="item-pircker" v-for="(item,index) in catelist1" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="catelist2">
						<view class="item-pircker" v-for="(item,index) in catelist2" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="catelist3">
						<view class="item-pircker" v-for="(item,index) in catelist3" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
		<view class="layer" v-if="is_area_show" style="z-index: 9999999999;">
			<view class="layer-content">
				<view
					class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between">
					<view class="text-cc" @click="is_area_show=false">取消</view>
					<view class="" style="color:#007aff;" @click="adresSubmit()">确定</view>
				</view>
				<picker-view :value="multiIndex" :indicator-style="indicatorStyle" class="picker-view"
					@change="changeAdres">
					<picker-view-column>
						<view class="item-pircker" v-for="(item,index) in arealist1" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="arealist2">
						<view class="item-pircker" v-for="(item,index) in arealist2" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="arealist3">
						<view class="item-pircker" v-for="(item,index) in arealist3" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shelf_state: 1,
				is_add_show: false,
				skuList: [],
				newSpec: "",
				PricList: [],
				//选择分类
				catelist1: [],
				catelist2: [],
				catelist3: [],
				multiIndex: [0, 0, 0],
				multiArray: [],
				indicatorStyle: 'height: 80rpx;',
				cateid: "",
				is_cate_show: false,
				catename: '',
				//邮费
				postagelist: [],
				postageid: "",
				postagename: "",
				// 城市地区
				arealist1: [],
				arealist2: [],
				arealist3: [],
				areaname: "",
				is_area_show: false,
				cover_img: "",
				coverup: "",
				video: "",
				imagelist: [],
				videolist: [],
				title: "",
				id: ""
			}
		},
		onLoad(options) {
			this.id = options.id?options.id:''
			if(options.id){
				uni.setNavigationBarTitle({
					title:'修改产品'
				})
			}
		},
		onReady() {

			this.$u.post('/api/shop/get_goods_category', {}).then(res => {
				if (res.code == 1) {
					var districtList = res.data
					this.catelist1 = districtList
					this.catelist2 = districtList[0].children
					this.catelist3 = districtList[0].children[0].children
				}
			})
			this.$u.post('/api/shop/get_logistics_list', {}).then(res => {
				if (res.code == 1) {
					this.postagelist = res.data.data
					if(this.id){
						this.$u.post('/api/shop/goods_detailis', {
							ids:this.id
						}).then(res => {
							if (res.code == 1) {
								this.title = res.data.title
								this.areaname =res.data.city
								this.skuList = res.data.spu
								this.PricList = res.data.sku
								this.cateid = res.data.category_id
								this.postageid = res.data.freight_id
								this.catename = res.data.category_name
								this.cover_img = res.data.image
								this.coverup = res.data.image
								this.imagelist = res.data.images
								this.videolist = res.data.images
								this.postagelist.forEach((item,index)=>{
									if(item.id==res.data.freight_id){
										this.postagename = this.postagelist[index].name
									}
								})
								if(res.data.mp4.length>0){
									this.video = res.data.mp4[0]
								}
								
							}
						})
					}
				}
			})
			this.$u.post('/api/index/area_list', {}).then(res => {
				if (res.code == 1) {
					var address = res.data
					this.arealist1 = address
					this.arealist2 = address[0].children
					this.arealist3 = address[0].children[0].children
				}
			})

			
		},
		methods: {
			//删除
			delAdd() {
				this.newSpec = ""
				this.is_add_show = false
			},
			// 添加新规格
			iptNewspec(e) {
				console.log(e)
				var arr = {
					title: '',
					skuitem: []
				}
				arr.title = e.detail.value
				this.skuList.push(arr)
				console.log(this.skuList)
				this.newSpec = ""
				this.is_add_show = false
			},
			// 删除规格
			skuDel(index) {
				var dellist = this.skuList
				dellist.splice(index, 1)
				console.log(dellist, 'dellist')
				this.getPricelist()
			},
			//规格名
			iptitSpec(indexs) {
				console.log(indexs, 'indexs')
				console.log(this.skuList, '规格名')
				this.getPricelist()
			},
			//添加规格名
			addSpec(skuitem, index) {
				console.log(skuitem)
				var arr = {
					name: ""
				}
				var newskuitm = skuitem
				newskuitm.push(arr)
				for (let i = 0; i < this.skuList.length; i++) {
					if (index == i) {
						this.skuList[i].skuitem = newskuitm
					}
				}
				console.log(this.skuList, 'sku')

			},
			//删除规格名
			delSpec(indexs, skuitem) {
				var newskuitm = skuitem
				newskuitm.splice(indexs, 1)
				for (let i = 0; i < this.skuList.length; i++) {
					if (indexs == i) {
						this.skuList[i].skuitem = newskuitm
					}
				}
				console.log(this.skuList, 'sku')

			},
			//生成价格列表
			getPricelist() {
				var ayy = []

				for (let i = 0; i < this.skuList.length; i++) {
					var temp_p = [];
					for (let j = 0; j < this.skuList[i].skuitem.length; j++) {
						if (ayy.length == 0) {
							temp_p.push(this.skuList[i].skuitem[j].name);
						} else {
							for (var t = 0; t < ayy.length; t++) {
								temp_p.push(ayy[t] + ',' + this.skuList[i].skuitem[j].name);

							}
						}
					}
					ayy = temp_p
				}


				this.last(ayy)
			},
			async last(ayy) {
				console.log(ayy)
				const add = {
					temp: []
				}

				const newList = ayy.map((v, i) => {
					return {
						temp: v.split(","),
						price: "",
						kuc: "",
						weigh:"",
						market_price:""
					}
				})

				this.PricList = newList
				console.log(this.PricList)
			},
			change(e) {
				let curMultiIndex = e.detail.value
				if (curMultiIndex[0] != this.multiIndex[0]) {
					this.multiIndex = [curMultiIndex[0], 0, 0]
				} else if (curMultiIndex[1] != this.multiIndex[1]) {
					this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0]
				} else if (curMultiIndex[2] != this.multiIndex[2]) {
					this.multiIndex = [this.multiIndex[0], this.multiIndex[1], curMultiIndex[2]]
				}
				console.log(this.multiIndex)
				var i = this.multiIndex[0]
				var j = this.multiIndex[1]
				var k = this.multiIndex[2]
				this.catelist2 = this.catelist1[i].children
				this.catelist3 = this.catelist1[i].children[j].children

				console.log(this.cateid)

			},
			cateSubmit() {
				var i = this.multiIndex[0]
				var j = this.multiIndex[1]
				var k = this.multiIndex[2]
				console.log(i,j,k)
				if(this.catelist3.length){
					this.catename = this.catelist1[i].name + ',' + this.catelist1[i].children[j].name + ',' + this.catelist1[i]
						.children[j].children[k].name
						this.cateid = this.catelist1[i].children[j].children[k].id
				}else if(this.catelist2.length){
					this.is_cate_show = false
					uni.showModal({
						title: '',
						content: '请选择三级分类',
						showCancel: false,
					})
					return false
					this.catename = this.catelist1[i].name + ',' + this.catelist1[i].children[j].name
					this.cateid = this.catelist1[i].children[j].id
				}else if(this.catelist1.length){
					this.is_cate_show = false
					uni.showModal({
						title: '',
						content: '请选择三级分类',
						showCancel: false,
					})
					return false
					this.catename = this.catelist1[i].name
					this.cateid = this.catelist1[i].id
				}
				
				
				this.is_cate_show = false
			},
			// 邮费
			getPostage(e) {
		
				this.postageid = this.postagelist[e.detail.value].id
				this.postagename = this.postagelist[e.detail.value].name
			},
			changeAdres(e) {
				let curMultiIndex = e.detail.value
				if (curMultiIndex[0] != this.multiIndex[0]) {
					this.multiIndex = [curMultiIndex[0], 0, 0]
				} else if (curMultiIndex[1] != this.multiIndex[1]) {
					this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0]
				} else if (curMultiIndex[2] != this.multiIndex[2]) {
					this.multiIndex = [this.multiIndex[0], this.multiIndex[1], curMultiIndex[2]]
				}
				console.log(this.multiIndex)
				var i = this.multiIndex[0]
				var j = this.multiIndex[1]
				var k = this.multiIndex[2]
				this.arealist2 = this.arealist1[i].children
				this.arealist3 = this.arealist1[i].children[j].children
				console.log(this.cateid)
			},
			adresSubmit() {
				var i = this.multiIndex[0]
				var j = this.multiIndex[1]
				var k = this.multiIndex[2]
				this.areaname = this.arealist1[i].name + '/' + this.arealist1[i].children[j].name + '/' + this.arealist1[
					i].children[j].children[k].name
				this.is_area_show = false
			},
			//上传图片
			upshopImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						if (res.tempFilePaths.length) {
							uni.uploadFile({
								url: 'https://apishop.qiancdj.com/api/common/upload', //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[0],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (res) => {
									this.cover_img = JSON.parse(res.data).data.fullurl
									this.coverup = JSON.parse(res.data).data.url
								}
							});
						}
					}
				});
			},
			chooseVideo() {
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					compressed: false,
					success: (res) => {
						uni.uploadFile({
							url: 'https://apishop.qiancdj.com/api/common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePath,
							name: 'file',
							success: (res) => {
								console.log(res, '上传视频')
								this.video = JSON.parse(res.data).data.fullurl
								this.videolist.push(JSON.parse(res.data).data.url)
								// this.coverup = JSON.parse(res.data).data.url
							}
						});
					}
				});
			},
			uplistImg() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log(res.tempFilePaths)
						if (res.tempFilePaths.length) {
							res.tempFilePaths.forEach((item, index) => {
								uni.uploadFile({
									url: 'https://apishop.qiancdj.com/api/common/upload', //仅为示例，非真实的接口地址
									filePath: item,
									name: 'file',
									formData: {
										'user': 'test'
									},
									success: (res) => {
										console.log(res, '图片列表')
										this.imagelist.push(JSON.parse(res.data).data
											.fullurl)
										this.videolist.push(JSON.parse(res.data).data.url)
										// this.cover_img = JSON.parse(res.data).data.fullurl
										// this.coverup = JSON.parse(res.data).data.url
									}
								});
							})

						}
					}
				});
			},
			getSc(index){
				var newlist = this.imagelist
				newlist.splice(index,1)
				this.imagelist =newlist
			},
			getSubmit() {
				if(this.skuList.length==0){
					uni.showModal({
						title: '',
						content: '请添加规格',
						showCancel: false,
					})
					return false
				}
				this.$u.post('/api/shop/add_goods', {
					title: this.title,
					category_id: this.cateid,
					image: this.coverup,
					images: this.videolist,
					city: this.areaname,
					freight_id: this.postageid,
					spu: this.skuList,
					sku: this.PricList,
					ids:this.id,
					shelf_state:this.shelf_state
				}).then(res => {
					if (res.code == 1) {
						uni.showModal({
							title:res.msg,
							showCancel:false,
							success() {
								uni.navigateBack({
									delta:1
								})
							}
						})
					}else{
						uni.showModal({
							title:res.msg,
							showCancel:false,
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		padding: 0 33rpx;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	.home{
		width: 100%;
		min-height: 100vh;
	}
	.top {
		padding: 30rpx 0;
		
		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.radius {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			margin-right: 10rpx;
			border: 1rpx solid #888;
		}

		.rad_css {
			background: #606DCE;
			border: 1rpx solid #606DCE;
		}

		.grey {
			color: #333;
			font-size: 28rpx;
		}
	}

	.it_flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item_pad_bot {
		padding-bottom: 10rpx !important;
	}

	.item {
		padding: 32rpx 30rpx;
		background: #fff;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		.it_left {
			font-weight: bold;
			color: #222;
		}

		input {
			font-size: 28rpx;
			text-align: right;
		}

		.it_right {
			display: flex;
			align-items: center;

			text {
				color: #222;
			}

			.it_lef_img {
				width: 10rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}

			.it_rig_img {
				width: 220rpx;
				height: 220rpx;
				border-radius: 20rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
			}
		}

		.it_right_duo {
			border-bottom: 1rpx solid #DFDFDF;

			&:last-child {
				border: none;
			}
		}

		.it_tit {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid #F5F5F5;

			.it_grey {
				font-size: 28rpx;
				color: #888;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}

			input {
				font-size: 28rpx;
				font-weight: bold;
				text-align: left;
			}
		}

		.it_specs {
			color: #222;
			display: flex;
			font-size: 24rpx;
			align-items: center;
			padding: 10rpx 24rpx;
			background: #F5F5F5;
			border-radius: 26rpx;
			margin-right: 30rpx;
			margin-bottom: 20rpx;

			.it_sp_line {
				width: 2rpx;
				height: 24rpx;
				margin: 0 20rpx 0 24rpx;
			}

			.it_sp_cha {
				width: 20rpx;
				height: 20rpx;
			}

			.it_sp_plus {
				width: 20rpx;
				height: 20rpx;
				margin-right: 20rpx;
			}

			.it_sp_gre {
				color: #606DCE;
			}
		}

		.it_specs input {
			flex: 1;
			max-width: 60rpx;
		}

		.it_pri {
			font-size: 24rpx;
			color: #222;
			padding: 10rpx 48rpx;
			background: #F5F5F5;
			border-radius: 26rpx;
			margin-right: 30rpx;
		}

		.it_ban {
			width: 50%;
			padding: 30rpx 0;

			input {
				flex: 1;
				text-align: left;
				margin-left: 20rpx;
			}
		}
	}

	.add {
		width: 200rpx;
		height: 60rpx;
		font-size: 28rpx;
		color: #FFF;
		margin: 0 auto;
		margin-top: 30rpx;
		background: linear-gradient( 98deg, #5D64CA 0%, #6F9BDF 100%);
		border-radius: 40rpx;
	}

	.btn {
		width: 630rpx;
		height: 80rpx;
		margin-top: 157rpx;
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.layer-content {}

	/* 浮层内容 */
	.confirm-bar {
		position: fixed;
		bottom: 600rpx;
		left: 0;
		width: 750rpx;
	}

	.line-height-80 {
		height: 80rpx;
		line-height: 80rpx;
	}

	.padding-lr-30 {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.bg-ff {
		background: #fff;
	}

	.border-bottom-ed {
		border-bottom: 1rpx solid #ededed;
	}

	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.picker-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 600rpx;
		background: #fff;
	}

	.item-pircker {
		line-height: 80rpx;
		height: 80rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.scimg{
		width: 45rpx;
		height: 45rpx;
		position: absolute;
		top: -20rpx;
		right: -20rpx;
	}
</style>